<template>
<div class="c-page">
  <div class="title-bg">生产计划</div>
  <div class="focus-line">
    <div class="left">关注计划区</div>
    <div class="focus-item">2020091124</div>
    <div class="focus-item">低压电气柜</div>
    <div class="focus-item">D180×60×80 A</div>
    <div class="focus-item">32</div>
    <div class="focus-item">10/21</div>
    <div class="focus-item">29</div>
    <div class="focus-item">10/19</div>
  </div>
  <div class="plan">
    <div class="item">
      <span>计划:</span>
      <span>27/6项</span>
      <span>562/27件</span>
    </div>
    <div class="item">
      <span>完成:</span>
      <span>23/6项</span>
      <span>562/27件</span>
    </div>
  </div>
  <div class="show-list-item">
    <div class="row th">计划编码</div>
    <div class="row th">产成品</div>
    <div class="row th">规格型号</div>
    <div class="row th">计划数</div>
    <div class="row th">交货期</div>
    <div class="row th">完成数</div>
    <div class="row th">完成日期</div>
  </div>

  <div class="show-list-item">
    <div class="row">202009087</div>
    <div class="row">低压电器柜</div>
    <div class="row">D180*220*80</div>
    <div class="row">80</div>
    <div class="row">10/18</div>
    <div class="row">250</div>
    <div class="row">10/19</div>
  </div>

  <div class="show-list-item">
    <div class="row">202009087</div>
    <div class="row">低压电器柜</div>
    <div class="row">D180*220*80</div>
    <div class="row">80</div>
    <div class="row">10/18</div>
    <div class="row">250</div>
    <div class="row">10/19</div>
  </div>
  <div class="show-list-item">
    <div class="row">202009087</div>
    <div class="row">低压电器柜</div>
    <div class="row">D180*220*80</div>
    <div class="row">80</div>
    <div class="row">10/18</div>
    <div class="row">250</div>
    <div class="row">10/19</div>
  </div>
  <div class="show-list-item">
    <div class="row">202009087</div>
    <div class="row">低压电器柜</div>
    <div class="row">D180*220*80</div>
    <div class="row">80</div>
    <div class="row">10/18</div>
    <div class="row">250</div>
    <div class="row">10/19</div>
  </div>
  <div class="show-list-item">
    <div class="row">202009087</div>
    <div class="row">低压电器柜</div>
    <div class="row">D180*220*80</div>
    <div class="row">80</div>
    <div class="row">10/18</div>
    <div class="row">250</div>
    <div class="row">10/19</div>
  </div>
  <div class="show-list-item">
    <div class="row">202009087</div>
    <div class="row">低压电器柜</div>
    <div class="row">D180*220*80</div>
    <div class="row">80</div>
    <div class="row">10/18</div>
    <div class="row">250</div>
    <div class="row">10/19</div>
  </div>
  <div class="show-list-item">
    <div class="row">202009087</div>
    <div class="row">低压电器柜</div>
    <div class="row">D180*220*80</div>
    <div class="row">80</div>
    <div class="row">10/18</div>
    <div class="row">250</div>
    <div class="row">10/19</div>
  </div>
</div>
</template>

<style lang="less" scoped>
.c-page {
  width: 100%;
  height: 100%;
  padding: 5px;
  cursor: pointer;

  .title-bg {
    background: url("../../../assets/images/title-bg.png") no-repeat top center;
    background-size: 100% 100%;
    font-size: 16px;
    padding: 4px 10px;
    text-align: left;
    width: 160px;
    margin: 10px 10px 0;
    color: #ffffff;
  }
  .focus-line {
    margin-top: 4px;
    background: #236796;
    border: 1px solid #2F90B8;
    font-size: 10px;
    display: flex;
    color: #ffffff;
    justify-content: space-evenly;
    .left {
      border-right: 1px solid #2F90B8;
    }
  }

  .plan {
    color: #2ED1E0;
    font-size: 13px;
    display: flex;
    justify-content: space-between;
    margin: 5px 0;

    .item {
      flex: 1;

      span {
        margin-left: 2px;
      }
    }
  }

  .show-list-item:hover {
    background: #1485B4;
    cursor: pointer;
  }

  .show-list-item {
    display: flex;
    font-size: 12px;
    color: #F3F3F3;
    text-align: center;
    margin-bottom: 4px;

    .th {
      color: #35EFFD;
    }

    .row {
      flex: 1;
    }

    .row:nth-child(1) {
      flex: 1.5;
    }

    .row:nth-child(2) {
      flex: 1.5;
    }

    .row:nth-child(3) {
      flex: 1.5;
    }
  }
}
</style>
